<template>
  <div>
    <AuthComponent></AuthComponent>
    <div v-if="userInfo.token != null" style="margin-bottom: 20px">
      <el-button type="primary" @click="goPublicBlog">大家博客</el-button>
      <el-button type="primary" @click="goBlog()">添加</el-button>
      <el-button type="primary" @click="goCategory()">分类</el-button>
    </div>
    <!--博客列表区域-->
    <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
      <div>
        <el-form ref="ruleForm" :inline="true">
          <el-form-item label="分类" >
            <el-select v-model="cgId" placeholder="请选择博客分类" @change="getBlogList" clearable>
              <el-option v-for="item in categoryArray" :label="item.cgName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-select v-model="orderId" placeholder="默认按时间排序" @change="getBlogList" clearable>
              <el-option v-for="item in orderArray" :label="item.orderName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-tab-pane :label="item.label" v-for="item in personTabArray" :key="item.id" :name="item.id">
          <div>
            <div v-for="(blog,index) in blogArray" :key="blog.id" style="position: relative; padding: 20px 0; margin: 10px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
              <div style="font-size: 20px;padding: 0 10px; color: #409EFF">{{ blog.title }}</div>
              <div style="margin: 20px;">
                {{ blog.content.substring(0, 30).replace(/\#|\`{3}|\*|(\*\s)/g, "")}}
              </div>
              <div style="font-size: 12px;padding: 0 10px; color: #C0C4CC">
           <span style="margin-right: 20px">

             <i class="el-icon-user"></i>
             {{ blog.creatorName }}
           </span>
                <span>
             <i class="el-icon-time"></i>
             {{ blog.createTime }}
           </span>
              </div>
              <div style="position: absolute;right:10px;top:30px;" >
                 <span v-if="activeName != '5'">
                   <el-button type="primary" @click="showBlog(blog.id)" size="mini">查看</el-button>
                   <el-button type="primary" @click="goBlog(blog.id)" size="mini" v-if="userInfo.token != null && blog.creatorId === userInfo.id">编辑</el-button>
                   <el-button type="primary" @click="delBlog(blog.id, index)" size="mini" v-if="userInfo.token != null && blog.creatorId === userInfo.id">删除</el-button>
                 </span>
                  <span v-else>
                     <el-button type="primary" @click="showBlog(blog.blogId)" size="mini">查看</el-button>
                 </span>

              </div>
            </div>
          </div>
          <div class="block" style="width:60%;margin: 0 auto;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import AuthComponent from "@/components/commen/AuthComponent";

export default {
  name: "BlogList",
  components: {
    AuthComponent
  },
  data() {
    return {
      blogArray: [],
      pageSize: 5,
      currentPage: 0,
      total: 0,
      cgId: null,
      orderId: null,
      activeName: '1',
      personTabArray: [
        {
          id: '1',
          label: "全部",
          name: "全部",
        },
        {
          id: '2',
          label: "公开",
          name: "公开"
        },
        {
          id: '3',
          label: "私密",
          name: "私密",

        },
        {
          id: '4',
          label: "草稿",
          name: "草稿"
        },
        {
          id: '5',
          label: "我的收藏",
          name: "我的收藏"
        },
      ],
      userInfo: {
        headImgUrl: '',
        userName: '',
        id: '',
        token: null
      },
      permissionState: null,
      publishState: null,
      categoryArray: [],
      orderArray: [
        {
          id: 1,
          orderName: '升序'
        },
        {
          id: 2,
          orderName: '降序'
        }
      ]
    }
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    this.getCategoryList()
    this.getBlogList()
    console.log(this.userInfo)
    if (!this.userInfo) {
      this.userInfo =  {
        id: '',
        headImgUrl: '',
        userName: '',
        token: null
      }
    }
  },
  methods: {
    getCategoryList() {
      this.$http.get("/category/person/list?pageNum=0&pageSize=100", {headers: {token: this.userInfo.token}}).then(res => {
        res = res.data
        if (res.code === 0) {
          res = res.data
          this.categoryArray = res.content
        }
      }).catch(err => {

      })
    },
    handleClick(tab, event) {
      if (tab.name == 2) {
        this.permissionState = 1
        this.publishState = 2
      }
      if (tab.name == 3) {
        this.permissionState = 2
        this.publishState = 2
      }
      if (tab.name == 4) {
        this.permissionState = null
        this.publishState = 1
      }
      if (tab.name == 1 || tab.name == 5) {
        this.publishState = null
        this.permissionState = null
      }
      this.currentPage = 0;
      this.getBlogList();
    },
    goCategory() {
      this.$router.push({ path: `/category/list/`})
    },
    goPublicBlog() {
      this.$router.push({ path: `/`})
    },
    getBlogList() {
      let currentPage = 0;
      if (this.currentPage <= 0) {
        currentPage = 0;
      } else {
        currentPage = this.currentPage - 1;
      }
      let params = currentPage+"&pageSize="+this.pageSize;
      if (this.cgId) {
        params = params+"&cgId="+this.cgId
      }
      if (this.permissionState) {
        params = params+"&permissionState="+this.permissionState
      }
      if (this.publishState) {
        params = params+"&publishState="+this.publishState
      }
      if (this.orderId) {
        params = params+"&orderId="+this.orderId
      }
      if (this.activeName == '5') {
        this.$http.get("/blog/collection/list?pageNum="+params, {headers: {token: this.userInfo.token}}).then(res => {
          res = res.data
          if (res.code === 0) {
            res = res.data
            this.blogArray = res.content
            console.log(this.blogArray)
            this.total = res.totalElements;
            this.blogArray.forEach(item => {
              item.content = ""
            })
          }
        }).catch(err => {

        })
      } else {
        this.$http.get("/blog/person/list?pageNum="+params, {headers: {token: this.userInfo.token}}).then(res => {
          res = res.data
          if (res.code === 0) {
            res = res.data
            this.blogArray = res.content
            this.total = res.totalElements;
          }
        }).catch(err => {

        })
      }

    },
    showBlog(blogId) {
      let flag = 2;
      this.$router.push({ path: `/blog/detail/${blogId}/${flag}`})
    },
    goBlog(blogId) {
      this.$router.push({ path: `/blog/save/${blogId}`})
    },
    delBlog(blogId, index) {
      this.$http.get("/blog/delete/"+blogId, {headers: {token: this.userInfo.token}}).then(res => {
        res = res.data
        if (res.code === 0) {
          this.blogArray.length --;
          if (this.blogArray.length === 0) {
            this.currentPage--;
          }
          this.getBlogList();
        }
      }).catch(err => {

      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getBlogList()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.getBlogList()
    },
  },
  watch() {

  }
}
</script>

<style scoped>

</style>